<route lang="yaml">
  meta:
    enabled: false
  </route>

<script setup lang="ts">
interface RowVO {
  id: number
  title: string
  icon: string
}

const tableData = ref<RowVO[]>([
  { id: 10001, title: '平台管理', icon: 'i-ep:user', children: [{ id: 10002, title: '系统管理', icon: 'i-ep:setting', children: [{ id: 10003, title: '人员管理', icon: 'i-ep:plus' }, { id: 10004, title: '菜单管理', icon: 'i-ep:edit' }, { id: 10005, title: '角色管理', icon: 'i-ep:start' }] }] },
  { id: 10001, title: '订单管理', icon: 'i-ep:delete', children: [{ id: 10002, title: '订单列表', icon: 'i-ep:delete' }] },
])

const addHandle = (id) => {
  console.log(id)
}


</script>

<template>
  <div>
    <FaPageMain>
      <el-form :model="searchform" label-width="auto" :inline="true" style="min-width: 600px">
        <el-form-item>
          <el-button type="success" @click="addHandle" :icon="Plus">新增菜单</el-button>
        </el-form-item>
      </el-form>
    </FaPageMain>
    <FaPageMain>
      <el-table
        :data="tableData"
        style="width: 100%"
        row-key="id"

        lazy border
        :load="load"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column prop="icon" label="图标">
          <template #default="scope">
            <FaIcon :name="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="id" label="操作" width="300" >
          <template #default="scope">
            <ElButton type="success" circle @click="addHandle(scope.row.id)">
              <template #icon>
                <FaIcon name="i-ep:circle-plus" />
              </template>
            </ElButton>
          </template>
        </el-table-column>
      </el-table>
    </FaPageMain>
  </div>
</template>
